<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="../bootstrap-5.1.3-dist/css/bootstrap.css">
    <link rel="stylesheet" href="font-awesome/css/font-awesome.css">
    <script src="../bootstrap-5.1.3-dist/js/bootstrap.bundle.js"></script>
    <link rel="stylesheet" href="style.css">
</head>

<body class="container my-3">
    <!--头部-->
    <div class="header">
        <div class="row no-gutters">
            <div class="col-6">
                <div class="row">
                    <div class="col-1">
                        <i class="fa fa-life-ring fa-4x text-success"></i>
                    </div>
                    <div class="col-4 text-center ms-3">
                        <h3 class="header-size"><a href="#">神影视频</a></h3>
                        <span><a href="#">ShenYingWang</a></span>
                    </div>
                </div>
            </div>
            <div class="col-6">
                <div class="d-flex justify-content-end">
                    <div class="form-inline">
                        <input class="me-sm-2" type="search" placeholder="搜索">
                        <a href="#" class="btn btn-outline-success my-2 my-sm-0"><i class="fa fa-search"></i></a>
                    </div>
                </div>
                <ul class="nav size1 justify-content-end">
                    <li class="nav-item">
                        <a class="nav-link" href="#">三生三世十里桃花</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">仙剑奇侠传</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">诛仙</a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="row no-gutters mt-2">
            <div class="col-6">
                <a href="" class="btn btn-warning">首页</a>
                <a href="" class="btn btn-warning">电影</a>
                <a href="" class="btn btn-warning">电视剧</a>
                <a href="" class="btn btn-warning">动漫</a>
                <a href="" class="btn btn-warning">综艺</a>
            </div>
            <div class="col-6 text-end">
                <a href="" class="btn btn-warning">登录</a>
                <a href="" class="btn btn-warning">注册</a>
            </div>
        </div>
        <div class="alert alert-success mt-3">
            <div class="spinner-border spinner-border-sm text-info">
                <span class="sr-only">Loading...</span>
            </div>
            如果您喜欢神影视频，请把它推荐给更多的人！
        </div>
    </div>
    <!-- 轮播 -->
    <div id="carousel" class="carousel slide" data-bs-ride="carousel">

        <!-- 指示图标 -->
        <div class="carousel-indicators">
            <button type="button" data-bs-target="#carousel" data-bs-slide-to="0" class="active"></button>
            <button type="button" data-bs-target="#carousel" data-bs-slide-to="1"></button>
            <button type="button" data-bs-target="#carousel" data-bs-slide-to="2"></button>
        </div>

        <!-- 轮播图片和文字 -->
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="image/10.jpg" class="d-block w-100">
                <div class="carousel-caption">
                    <h3>本周热播电影1</h3>
                    <p>电影1</p>
                </div>
            </div>
            <div class="carousel-item">
                <img src="image/11.jpg" class="d-block w-100">
                <div class="carousel-caption">
                    <h3>本周热播电影2</h3>
                    <p>电影2</p>
                </div>
            </div>
            <div class="carousel-item ">
                <img src="image/12.jpg" class="d-block w-100">
                <div class="carousel-caption">
                    <h3>本周热播电影3</h3>
                    <p>电影3</p>
                </div>
            </div>
        </div>
        <!-- 左右切换按钮 -->
        <button class="carousel-control-prev" type="button" data-bs-target="#carousel" data-bs-slide="prev">
            <span class="carousel-control-prev-icon"></span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#carousel" data-bs-slide="next">
            <span class="carousel-control-next-icon"></span>
        </button>
    </div>
    <!--分类专区-->
    <div class="row my-3">
        <div class="col-4">
            <h5 class="card-header">按热播排行</h5>
            <div class="p-1 bg-white">
                <a href="#" class="btn color4">本周最火</a>
                <a href="#" class="btn color4">历史最火</a>
                <a href="#" class="btn color4">最新上映</a>
                <a href="#" class="btn color4">评分最高</a>
                <a href="#" class="btn color4">女性专场</a>
                <a href="#" class="btn color4">罪恶题材</a>
            </div>
        </div>
        <div class="col-4">
            <h5 class="card-header">按类型</h5>
            <div class="p-1 bg-white">
                <a href="#" class="btn color4">爱情</a>
                <a href="#" class="btn color4">动作</a>
                <a href="#" class="btn color4">喜剧</a>
                <a href="#" class="btn color4">惊悚</a>
                <a href="#" class="btn color4">恐怖</a>
                <a href="#" class="btn color4">悬疑</a>
                <a href="#" class="btn color4">科幻</a>
                <a href="#" class="btn color4">历史</a>
                <a href="#" class="btn color4">灾难</a>
                <a href="#" class="btn color4">经典</a>
            </div>
        </div>
        <div class="col-2">
            <h5 class="card-header">按地区</h5>
            <div class="p-1 bg-white">
                <a href="#" class="btn color4">内地</a>
                <a href="#" class="btn color4">港台</a>
                <a href="#" class="btn color4">欧美</a>
            </div>
        </div>
        <div class="col-2">
            <h5 class="card-header">按电影基因</h5>
            <div class="p-1 bg-white">
                <a href="#" class="btn color4">抗日</a>
                <a href="#" class="btn color4">间谍</a>
                <a href="#" class="btn color4">硬汉</a>
                <a href="#" class="btn btn-outline-success btn-sm">更多</a>
            </div>
        </div>
    </div>

    <div class="row ps-3 scale">
        <div class="col-9 bg-white pt-3">
            <div class="d-flex justify-content-between">
                <div>
                    <h3>
                        <div class="border1 me-2"></div>最新电影
                    </h3>
                </div>
                <div><a href="#" class="btn btn-outline-danger btn-sm">更多</a></div>
            </div>
            <div class="row no-gutters">
                <div class="col-3 p-1">
                    <img src="image/01.png" alt="" class="img-fluid">
                    <h5 class="color1">绿巨人2</h5>
                    <p class="color2">最帅绿巨人诺顿</p>
                </div>
                <div class="col-3 p-1">
                    <img src="image/02.png" alt="" class="img-fluid">
                    <h5 class="color1">蚁人</h5>
                    <p class="color2">漫威宇宙第二阶段收官之作</p>
                </div>
                <div class="col-3 p-1">
                    <img src="image/03.png" alt="" class="img-fluid">
                    <h5 class="color1">复仇者联盟三部连看</h5>
                    <p class="color2">漫威英雄齐聚</p>
                </div>
                <div class="col-3 p-1">
                    <img src="image/04.png" alt="" class="img-fluid">
                    <h5 class="color1">钢铁侠3</h5>
                    <p class="color2">钢铁侠的崛起</p>
                </div>
            </div>
            <div class="d-flex justify-content-between mt-2">
                <div>
                    <h3><span class="border2 me-2"></span>最新电视剧</h3>
                </div>
                <div><a href="#" class="btn btn-outline-primary btn-sm">更多</a></div>
            </div>
            <div class="row no-gutters">
                <div class="col-3 p-1">
                    <img src="image/06.png" alt="" class="img-fluid">
                    <h5 class="color1">闪电侠</h5>
                    <p class="color2">宇宙快男大战思考者</p>
                </div>
                <div class="col-3 p-1">
                    <img src="image/07.png" alt="" class="img-fluid">
                    <h5 class="color1">西部世界</h5>
                    <p class="color2">人工智能的终极复仇</p>
                </div>
                <div class="col-3 p-1">
                    <img src="image/08.png" alt="" class="img-fluid">
                    <h5 class="color1">河谷镇</h5>
                    <p class="color2">高颜值悬疑版绯闻女孩</p>
                </div>
                <div class="col-3 p-1">
                    <img src="image/09.png" alt="" class="img-fluid">
                    <h5 class="color1">权力的游戏</h5>
                    <p class="color2">HBO奇幻史诗巨作</p>
                </div>
            </div>
        </div>
        <div class="col-3">
            <div>
                <h4><i class="fa fa-fire me-2 text-danger"></i>最热电影</h4>
            </div>
            <div class="list-group list-group-flush mt-3">
                <a href="#" class="list-group-item list-group-item-action list-group-item-light">
                    <span class="number1 me-3">1</span><b class="color3">老师好</b>
                </a>
                <a href="#" class="list-group-item list-group-item-action list-group-item-light">
                    <span class="number1 me-3">2</span><b class="color3">笑盗江湖</b>
                </a>
                <a href="#" class="list-group-item list-group-item-action list-group-item-light">
                    <span class="number1 me-3">3</span><b class="color3">流浪地球</b>
                </a>
                <a href="#" class="list-group-item list-group-item-action list-group-item-light">
                    <span class="number3 me-3">4</span><b class="color3">人间喜剧</b>
                </a>
                <a href="#" class="list-group-item list-group-item-action list-group-item-light">
                    <span class="number3 me-3">5</span><b class="color3">复仇者联盟3</b>
                </a>
                <a href="#" class="list-group-item list-group-item-action list-group-item-light">
                    <span class="number3 me-3">6</span><b class="color3">一代宗师</b>
                </a>
                <a href="#" class="list-group-item list-group-item-action list-group-item-light">
                    <span class="number3 me-3">7</span><b class="color3">叶问3</b>
                </a>
                <a href="#" class="list-group-item list-group-item-action list-group-item-light">
                    <span class="number3 me-3">8</span><b class="color3">风中有朵雨做的云</b>
                </a>
            </div>
            <div class="mt-4 mb-3">
                <h4><i class="fa fa-fire me-2 text-primary"></i>最热电视剧</h4>
            </div>
            <div class="list-group list-group-flush">
                <a href="#" class="list-group-item list-group-item-action list-group-item-light">
                    <span class="number2 me-3">1</span><b class="color3">仙剑奇侠传</b>
                </a>
                <a href="#" class="list-group-item list-group-item-action list-group-item-light">
                    <span class="number2 me-3">2</span><b class="color3">趁我们还年轻</b>
                </a>
                <a href="#" class="list-group-item list-group-item-action list-group-item-light">
                    <span class="number2 me-3">3</span><b class="color3">暖暖小时光</b>
                </a>
                <a href="#" class="list-group-item list-group-item-action list-group-item-light">
                    <span class="number3 me-3">4</span><b class="color3">何人生还</b>
                </a>
                <a href="#" class="list-group-item list-group-item-action list-group-item-light">
                    <span class="number3 me-3">5</span><b class="color3">权利游戏</b>
                </a>
                <a href="#" class="list-group-item list-group-item-action list-group-item-light">
                    <span class="number3 me-3">6</span><b class="color3">遇见爱情</b>
                </a>
                <a href="#" class="list-group-item list-group-item-action list-group-item-light">
                    <span class="number3 me-3">7</span><b class="color3">三生三世十里桃花</b>
                </a>
                <a href="#" class="list-group-item list-group-item-action list-group-item-light">
                    <span class="number3 me-3">8</span><b class="color3">诛仙</b>
                </a>
            </div>
        </div>
    </div>
    <div class="footer mt-4 py-4">
        <ul class="nav justify-content-center">
            <li class="nav-item">
                <a class="nav-link active" href="#">关于我们</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">|</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">联系我们</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">|</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">诚聘英才</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">|</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">友情链接</a>
            </li>
        </ul>
        <div class="text-center size2">电影卫星频道节目中心</div>
    </div>
</body>

</html>